<template>
    <div class="todo-container">
        <el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  list-type="picture-card"
  :http-request="uploadFile"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove">
  <i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
    </div>
</template>

<script>
import * as qiniu from 'qiniu-js'
import {fileApi} from '@/api/user';
  export default {
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false
      };
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      uploadFile(uploadInfo){
        console.log(uploadInfo)
        var $filetype = (uploadInfo.file.type).split("/")[1];//文件类型
        fileApi({"type":$filetype})
         .then(res => {
             console.log('success')
             console.log(res.data)
             var cdn = res.data.cdn;
             // 上传文件
             const observer = {
                 next(res){
                     console.log('next: ',res)
                 },
                 error(err){
                     console.log(err)
                 },
                 complete(res){
                     console.log('complete: ',res)
                     var file_src = cdn+res.key;
                     console.log(file_src);
                 }
             }
             const observable = qiniu.upload(uploadInfo.file, res.data.filename, res.data.uploadtoken, {}, {})
            /// console.log(observable);
             const subscription = observable.subscribe(observer) // 上传开始
             // subscription.unsubscribe() // 上传取消
             console.log(subscription);
         })
         .catch(err => {
            console.log(err);
             this.$message.error('获取上传 token 失败')
         })
 }
}
  }
</script>